<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Task Details</title>
	<link rel="stylesheet" href="style.css">
	<script src="app.js"></script>
	
</head>
<body>
	<nav class="navbar">
		<a href="index.html" class="nav-brand">k8s-ai-bench</a>
		<div class="nav-links">
			<a href="index.html" class="nav-btn">Leaderboard</a>
			<a href="tasks.html" class="nav-btn active">Tasks</a>
			<a href="about.html" class="nav-btn">About</a>
			<a href="https://github.com/GoogleCloudPlatform/kubectl-ai" class="nav-btn" target="_blank">GitHub &nearr;</a>
		</div>
	</nav>
	<div class="container">
		
		<a href="tasks.html" class="back-link">&larr; Back to Tasks List</a>
		<h1 id="task-title">Loading...</h1>
		<table id="task-detail-table">
			<thead>
				<tr>
					<th data-idx="0" style="width: 40%;">Model</th>
					<th data-idx="1" style="width: 20%;">Pass Rate</th>
					<th data-idx="2" style="width: 40%;">Run Outcomes</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
		<script>
			window.renderPage = function() {
				if(!window.PROCESSED_DATA) return;
				const params = new URLSearchParams(window.location.search);
				const taskId = params.get('id');
				const data = window.PROCESSED_DATA.task_details[taskId];
				if (!data) {
					document.getElementById('task-title').innerText = 'Task Not Found';
					return;
				}
				document.getElementById('task-title').innerText = taskId;
				const tbody = document.querySelector('#task-detail-table tbody');
				tbody.innerHTML = data.map(row => {
					const dots = row.runs.map(r => '<div class="run-dot '+r.val+'" title="Run '+r.r+': '+r.val+'"></div>').join('');
					return '<tr><td><a href="model.html?id='+encodeURIComponent(row.model)+'" class="model-link">'+row.model+'</a></td>' +
						   '<td>'+row.p1+'%%</td><td>'+dots+'</td></tr>';
				}).join('');
			}
		</script>
	
	</div>
</body>
</html>